<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <meta name="format-detection" content="telephone=no">
<!-- bootstrap & fontawesome -->
<!-- <link rel="stylesheet" href="{{ asset('/admin/css/bootstrap.min.css') }}"/> -->
<!-- <link rel="stylesheet" href="{{ asset('/admin/font-awesome/4.5.0/css/font-awesome.min.css') }}"/> -->
<script>
  (function (doc, win) {
    var docEl = doc.documentElement,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
      recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
      };
    recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>
<title></title>
<link rel="stylesheet" href="{{asset('/api/static/css/base.css')}}">
<link rel="stylesheet" href="{{asset('/api/static/swiper/css/swiper.min.css')}}">
<link rel="stylesheet" href="{{asset('/api/static/css/index.css?v=1.1')}}">
</head>
<body>
<div class="bgTop"><div></div></div>
<!-- <div class="banner"> -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      @foreach($banner as $item)
        <div class="swiper-slide">
          <a href="javascript:void(0)" onclick="ttp.bannerClickTitle('{{$item['webpage']}}','{{$item['title']}}')">
            <img src="{{$item['img']}}"/>
          </a>
        </div>
      @endforeach
    </div>
  </div>
<!-- </div> -->
<div class="newMarket">
    <a class="title" href="javascript:void(0);" onclick="ttp.goToCoinQuotes()">最新行情</a>
    <ul class="currencyLists" id="message_count">
      @foreach($btc as $item)
        <li>
          <a href="javascript:void(0);" onclick="ttp.gotoKDataCoinName('{{$item['id']}}','{{$item['name_en']}}')">
            <div class="pic clearfix">
              <img class="fl" src="{{$item['logo']}}">
              <p class="fl">{{$item['name_en']}}/USDT</p>
            </div>
            <div class="MData">
              <div class="newData">
                <h3>最新价格{{$item['lasted_price']}}</h3>
                  @if($item['gains_type']==0)
                      <h4 class="rise">{{$item['gains']}}</h4>
                  @else
                      <h4 class="fall">{{$item['gains']}}</h4>
                  @endif
              </div>
              <div class="history clearfix">
                <p>最高价<strong>{{$item['max_price']}}</strong></p>
                <p>最低价<strong>{{$item['min_price']}}</strong></p>
                <p>成交额<strong>{{$item['sum_price']}}</strong></p>
                <p>成交量<strong>{{$item['order_count']}}</strong></p>
              </div>
            </div>
          </a>
        </li>
      @endforeach
    </ul>
</div>
<script src="{{asset('/api/static/js/jquery-1.10.2.min.js')}}"></script>
<script src="{{asset('/api/static/swiper/js/swiper.min.js')}}"></script>
<script src="{{asset('/api/static/js/index.js')}}"></script>
<script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
$(function(){
  var bannerSwiper = new Swiper('.swiper-container', {
    spaceBetween: 15,
    centeredSlides: true,
    slidesPerView: 1.2,
  });
});

function html2Escape(sHtml) {
    return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];});
}

function escape2Html(str) {
    var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
}
var socket = io('https://a.51tuanli.com:2120');
uid = 'index1';
socket.on('connect', function(){
    socket.emit('login', uid);
});
// 后端推送来消息时
socket.on('new_msg', function(msg){
    var text = escape2Html(msg);
    var json = JSON.parse(text);
    console.log(json);

    var html='';
    for(var i in json){
      var js_id = "'"+parseInt(json[i].id)+"'";
      var js_name = "'"+json[i].name_en.toUpperCase()+"'";
      html += '<li>' +
          '<a href="javascript:void(0);" onclick="ttp.gotoKDataCoinName('+js_id+','+js_name+')">' +
          '<div class="pic clearfix">' +
          '<img class="fl" src="'+json[i]['logo']+'">' +
          '<p class="fl">'+json[i]['name_en']+'/USDT</p>' +
          '</div>' +
          '<div class="MData">' +
          '<div class="newData">' +
          '<h3>最新价格'+json[i]['lasted_price']+'</h3>';

      var str ='<h4 class="fall">'+json[i]['gains']+'</h4>' ;
      if(json[i]['gains_type'] == 0){
          str ='<h4 class="rise">'+json[i]['gains']+'</h4>' ;
      }
      html += str+
          '</div>' +
          '<div class="history clearfix">' +
          '<p>最高价<strong>'+json[i]['max_price']+'</strong></p>' +
          '<p>最低价<strong>'+json[i]['min_price']+'</strong></p>' +
          '<p>成交额<strong>'+json[i]['sum_price']+'</strong></p>' +
          '<p>成交量<strong>'+json[i]['order_count']+'</strong></p>' +
          '</div>' +
          '</div>' +
          '</a>' +
          '</li>'
    }
    $('#message_count').html(html);

});
</script>
</body>
</html>
